<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  reportData: {
    out: { count: number; num: number; money: number };
    in: { count: number; num: number; money: number };
    sellBuy: { count: number; num: number; money: number; profit: number };
    purchase: { count: number; num: number; money: number };
    good: {
      count: number;
      totalNum: number;
      totalCostMoney: number;
      totalMoney: number;
      totalWarn: number;
      stockNum: number;
    };
  };
}

const props = withDefaults(defineProps<Props>(), {
  reportData: () => ({
    out: { count: 0, num: 0, money: 0 },
    in: { count: 0, num: 0, money: 0 },
    sellBuy: { count: 0, num: 0, money: 0, profit: 0 },
    purchase: { count: 0, num: 0, money: 0 },
    good: {
      count: 0,
      totalNum: 0,
      totalCostMoney: 0,
      totalMoney: 0,
      totalWarn: 0,
      stockNum: 0
    }
  })
});

const goodsData = computed(() => {
  const good = props.reportData.good;

  return [
    {
      title: '全部商品',
      value: good?.count || 0,
      unit: '种',
      icon: 'ant-design:appstore-outlined',
      color: 'text-blue-600',
      bgColor: 'bg-blue-50'
    },
    {
      title: '总数量',
      value: good?.totalNum || 0,
      unit: '件',
      icon: 'ant-design:inbox-outlined',
      color: 'text-green-600',
      bgColor: 'bg-green-50'
    },
    {
      title: '总成本',
      value: good?.totalCostMoney || 0,
      unit: '元',
      icon: 'ant-design:wallet-outlined',
      color: 'text-orange-600',
      bgColor: 'bg-orange-50'
    },
    {
      title: '总金额',
      value: good?.totalMoney || 0,
      unit: '元',
      icon: 'ant-design:gold-outlined',
      color: 'text-purple-600',
      bgColor: 'bg-purple-50'
    },
    {
      title: '预警商品',
      value: good?.totalWarn || 0,
      unit: '种',
      icon: 'ant-design:warning-outlined',
      color: 'text-red-600',
      bgColor: 'bg-red-50'
    },
    {
      title: '总店仓',
      value: good?.stockNum || 0,
      unit: '个',
      icon: 'ant-design:shop-outlined',
      color: 'text-indigo-600',
      bgColor: 'bg-indigo-50'
    }
  ];
});
</script>

<template>
  <div class="grid grid-cols-3 gap-3 lg:grid-cols-6">
    <div
      v-for="item in goodsData"
      :key="item.title"
      class="border border-gray-100 rounded-md bg-white p-3 text-center transition-shadow hover:shadow-sm"
    >
      <div class="flex flex-col items-center">
        <div class="mb-2 h-8 w-8 flex items-center justify-center rounded-lg" :class="[item.bgColor]">
          <SvgIcon :icon="item.icon" class="h-4 w-4" :class="[item.color]" />
        </div>
        <div class="mb-1 text-lg text-gray-900 font-bold">
          {{ typeof item.value === 'number' && item.value > 0 ? item.value.toLocaleString() : item.value || '0' }}
        </div>
        <div class="text-xs text-gray-500">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
